<template>
  <div class="app-container">
    <p>会员基本信息</p>
    <el-card class="box-card">
      <ul>
        <li>
          <div class="item">
            <p>
              <span class="title">姓名</span>
              <span>{{this.memberdetails.nickname}}</span>
            </p>
            <p>
              <span class="title">所在城市</span>
              <span>{{this.memberdetails.province}}/{{this.memberdetails.city}}</span>
            </p>
            <p>
              <span class="title">自购累积</span>
              <span>{{memberdetails.totalConsume}}元</span>
            </p>
            <p>
              <span class="title">账户余额</span>
              <span>{{memberdetails.balance}}元</span>
            </p>
            <p>
              <span class="title">积分余额</span>
              <span>{{memberdetails.points}}元</span>
            </p>
            <p>
              <span class="title">注册时间</span>
              <span>{{memberdetails.createTime}}</span>
            </p>
          </div>
        </li>
        <li>
          <div class="item">
            <p>
              <span class="title">累积销售</span>
              <span>{{memberdetails.totalSales}}</span>
            </p>
            <p>
              <span class="title">累积返佣</span>
              <span>{{memberdetails.totalCommission}}元</span>
            </p>
            <p>
              <span class="title">已提佣金</span>
              <span>{{memberdetails.extractCommission}}元</span>
            </p>
            <p>
              <span class="title">累积积分</span>
              <span>{{memberdetails.totalPoints}}元</span>
            </p>
            <p>
              <span class="title">已兑积分</span>
              <span>{{memberdetails.extractPoints}}元</span>
            </p>
          </div>
        </li>
        <li>
          <div class="item">
            <p>
              <span class="title">会员数量</span>
              <span>{{memberdetails.oneLevelCount+memberdetails.twoLevelCount+memberdetails.lastMonthCount}}人</span>
            </p>
            <p>
              <span class="title">一级会员</span>
              <span>{{memberdetails.oneLevelCount}}人</span>
            </p>
            <p>
              <span class="title">二级会员</span>
              <span>{{memberdetails.twoLevelCount}}人</span>
            </p>
            <p>
              <span class="title">上月新增</span>
              <span>{{memberdetails.lastMonthCount}}人</span>
            </p>
          </div>
        </li>
      </ul>
    </el-card>
    <!-- <ul class="tab-tilte">
      <li :class="item.id===navIndex?'active':''" v-for="item in navList" :key="item.id" @click="switchTab(item)">{{item.txt}}</li>
    </ul>-->
    <div class="table-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="返佣明细" name="first">
          <el-table ref="productTable" :data="list" style="100%" @selection-change="handleSelectionChange" v-loading="listLoading" border="">
            <el-table-column label="会员名称" width="400" align="center">
              <template slot-scope="scope">{{scope.row.consumeNickname}}</template>
            </el-table-column>
            <el-table-column label="类别" width="220" align="center">
              <template slot-scope="scope">{{scope.row.level}}</template>
            </el-table-column>
            <el-table-column label="时间" width="200" align="center">
              <template slot-scope="scope">{{scope.row.createTime}}</template>
            </el-table-column>
            <el-table-column label="购买金额" width="240" align="center">
              <template slot-scope="scope">{{scope.row.consumePayAmount}}</template>
            </el-table-column>
            <el-table-column label="返佣" width="200" align="center">
              <template slot-scope="scope">{{scope.row.percent}}%</template>
            </el-table-column>
            <el-table-column label="返佣金额" width="300" align="center">
              <template slot-scope="scope">{{scope.row.money}}</template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="账户明细" name="second">
          <el-table ref="productTable" :data="accountlist" style="100%" @selection-change="handleSelectionChange" v-loading="listLoading" border="">
            <el-table-column label="时间" align="center">
              <template slot-scope="scope">{{scope.row.createTime}}</template>
            </el-table-column>
            <el-table-column label="操作类别" align="center">
              <template slot-scope="scope">{{scope.row.type}}</template>
            </el-table-column>
            <el-table-column label="金额" align="center">
              <template slot-scope="scope">{{scope.row.money}}%</template>
            </el-table-column>
            <el-table-column label="账户余额" align="center">
              <template slot-scope="scope">{{scope.row.newBalance}}</template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!--  -->
        <el-tab-pane label="积分明细" name="third">
          <el-table ref="productTable" :data="pointlist" style="100%" @selection-change="handleSelectionChange" v-loading="listLoading" border="">
            <el-table-column label="时间" align="center">
              <template slot-scope="scope">{{scope.row.createTime}}</template>
            </el-table-column>
            <el-table-column label="积分类别" align="center">
              <template slot-scope="scope">{{scope.row.type}}</template>
            </el-table-column>
            <el-table-column label="数额" align="center">
              <template slot-scope="scope">{{scope.row.money}}%</template>
            </el-table-column>
            <el-table-column label="积分余额" align="center">
              <template slot-scope="scope">{{scope.row.newBalance}}</template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {
  getMemberDetail,
  getRebatedetails,
  getAccountdetails,
  getPointsdetails
} from "@/api/member";

const defaultListQuery = {
  merchantId: 1,
  pageNum: 1,
  pageSize: 5
};
export default {
  data() {
    return {
      activeName: "first",
      listLoading: true,
      memberdetails: {},
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      accountlist: null,
      pointlist: null
    };
  },
  mounted() {
    getMemberDetail(this.$route.query.id, 1).then(response => {
      if (response.code == 0) {
        this.memberdetails = response.data;
      }
    });
    this.getList();
    this.getaccountList();
    this.getpointList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      getRebatedetails(this.$route.query.id, this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        // this.total = response.data.total;
      });
    },
    // 账户明细
    getaccountList() {
      this.listLoading = true;
      getAccountdetails(this.$route.query.id, this.listQuery).then(response => {
        this.listLoading = false;
        this.accountlist = response.data.list;
        // this.total = response.data.total;
      });
    },
    // 积分明细
    getpointList() {
      this.listLoading = true;
      getPointsdetails(this.$route.query.id, this.listQuery).then(response => {
        this.listLoading = false;
        this.pointlist = response.data.list;
        // this.total = response.data.total;
      });
    },

    // handleCurrentChange(val) {
    //   this.listQuery.pageNum = val;
    //   this.getList();
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
    // handlePublishStatusChange(index, row) {
    //   let ids = [];
    //   ids.push(row.id);
    //   this.updatePublishStatus(row.publishStatus, ids);
    // }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  background: #fff;
  min-height: 500px;
  .box-card {
    ul {
      display: flex;
      justify-content: space-between;
      li {
        width: 30%;
        .title {
          width: 100px;
          display: inline-block;
        }
      }
    }
  }
  .tab-tilte {
    height: 40px;
    width: 50%;
    margin-bottom: 10px;
    padding: 0 !important;

    li {
      float: left;
      width: 25%;
      padding: 10px 0;
      text-align: center;
      // background-color: #f4f4f4;
      cursor: pointer;
    }
  }
  /* 点击对应的标题添加对应的背景颜色 */
  .tab-tilte .active {
    border-bottom: 2px solid #09f;
    color: #000;
    font-weight: 600;
  }
}
</style>
